import 'package:flutter/material.dart';
import 'package:flutter_one/class/app/news/v/NewsPageChildView.dart';
import 'package:flutter_one/class/app/news/vm/NewsPageViewModel.dart';
import 'package:flutter_one/class/appbase/BaseView.dart';
import 'package:flutter_one/class/appbase/BaseViewModel.dart';
import 'package:flutter_one/class/appsetting/setting.dart';
import 'package:flutter_one/class/utils/Utils.dart';

class NewsPageView extends StatefulWidget {
  const NewsPageView({super.key});

  @override
  State<NewsPageView> createState() => _NewsPageViewState();
}

class _NewsPageViewState extends State<NewsPageView> {
  late final NewsPageViewModel _vm = NewsPageViewModel();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return BaseView<NewsPageViewModel>(
        viewModel: _vm,
        build: (context, viewModel, child) {
          if (viewModel.state == ViewState.Busy) {
            return BaseView.loadingWidget();
          } else {
            return DefaultTabController(
                length: viewModel.arrCategory.length,
                child: NestedScrollView(
                  headerSliverBuilder:
                      (BuildContext context, bool innerBoxIsScrolled) {
                    return <Widget>[
                      SliverOverlapAbsorber(
                        handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                            context),
                        sliver: SliverAppBar(
                          title: Utils.shareInstance.customPageTitle('资讯'),
                          //标题横向间距
                          titleSpacing: 15,
                          //左侧的图标或文字，多为返回箭头
                          leading: null,
                          //左边按钮的宽度
                          leadingWidth: 15,
                          //居中
                          centerTitle: false,
                          //标题栏是否固定
                          pinned: true,
                          //滑动时是否悬浮
                          floating: false,
                          //配合floating使用
                          snap: false,
                          //是否显示在状态栏的下面,false就会占领状态栏的高度
                          primary: true,
                          //设置分栏区域上面的高度
                          // expandedHeight: 0,
                          elevation: 0,
                          //是否显示阴影，直接取值innerBoxIsScrolled，展开不显示阴影，合并后会显示
                          forceElevated: innerBoxIsScrolled,
                          //自定义导航和中间内容的展示
                          flexibleSpace: null,
                          //导航栏背景色
                          backgroundColor: K_APP_NAVIGATION_BACKGROUND_COLOR,
                          automaticallyImplyLeading: false,
                          //TabBar 分栏标题
                          bottom: _setCategoryTabBar(viewModel),
                        ),
                      )
                    ];
                  },
                  //分栏展示的页面信息
                  body: _setCategoryTabBarView(context, viewModel),
                ));
          }
        },
        onModelReady: (viewModel) {
          //加载栏目
          viewModel.categoryLoad(context, isLoading: false);
        });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }
}

//MARK: - 扩展
extension on _NewsPageViewState {
  //分栏菜单
  TabBar _setCategoryTabBar(NewsPageViewModel viewModel) {
    return TabBar(
      //设置对齐方式(否则左边有空白)
      tabAlignment: TabAlignment.start,
      //是否允许滚动
      isScrollable: true,
      //未选中的颜色
      unselectedLabelColor: Utils.shareInstance.hexToInt(0x505050),
      //未选中的样式
      unselectedLabelStyle: const TextStyle(fontSize: 15),
      //选中的颜色
      labelColor: K_APP_TINT_COLOR,
      //选中的样式
      labelStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      //底部滑动条样式
      indicatorSize: TabBarIndicatorSize.label,
      //底部滑动条颜色
      indicatorColor: K_APP_TINT_COLOR,
      //菜单项目
      tabs: viewModel.arrCategory.map((item) {
        return Tab(text: item.name);
      }).toList(),
    );
  }

  // tabBar 分栏菜单页面
  Widget _setCategoryTabBarView(
      BuildContext context, NewsPageViewModel viewModel) {
    return TabBarView(
        children: viewModel.arrCategory.map((item) {
      return NewsPageChildView(viewModel: viewModel, typeModel: item);
    }).toList());
  }
}
